<template>
  <div class="box">
    <header>
      <div class="nav">
          <van-nav-bar v-show="navFlag" left-arrow @click-left="$router.back()">
            <template #right>
              <van-icon name="weapp-nav" size="20"/>
            </template>
          </van-nav-bar>
          <div class="van-nav-bar" v-show="!navFlag">
            <span class="iconfont icon-fanhui"></span>
            <span>商品</span>
            <span>评价</span>
            <span>详情</span>
            <span>推荐</span>
            <van-icon name="weapp-nav" size="20"/>
          </div>
       </div>
    </header>
      <section class="content" ref="content">
        <van-empty v-if="flag" image="search" description="抱歉，没有查找到该产品" />
        <div class="detailContent" v-else>
          <van-swipe class="detail-swipe" @change="onchange">
            <van-swipe-item v-for="(item, index) of detailBannerList" :key="index" @click="previewImg">
              <van-image :src="item"/>
            </van-swipe-item>
            <template #indicator>
              <div class="custom-indicator">
                {{ current + 1 }}/ {{ detailBannerList.length }}
              </div>
            </template>
          </van-swipe>
        </div>
        <div class="proinfo">
          <span class="price">￥{{ proObj.price }}</span>
          <span class="iconfont icon-fenxiang" @click = "showShare = true">分享</span>
          <h3>{{ proObj.proname }}</h3>
        </div>
        <van-goods-action>
          <van-goods-action-icon icon="chat-o" text="客服" color="#07c160" @click="chat"/>
          <van-goods-action-icon icon="cart-o" text="购物车" @click="loginState ? $router.push('/cart') : $router.push('/login')" :badge="totalNum"/>
          <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
          <van-goods-action-button type="warning" text="加入购物车" @click="addCart"/>
          <van-goods-action-button type="danger" text="立即购买" />
        </van-goods-action>
        <!-- <div>
          <p class="setgoods">小烦恼没什呢大不了</p>
          <p class="setgoods">小烦恼没什呢大不了</p>
          <p class="setgoods">小烦恼没什呢大不了</p>
          <p class="setgoods">小烦恼没什呢大不了</p>
          <p class="setgoods">小烦恼没什呢大不了</p>
          <p class="setgoods">小烦恼没什呢大不了</p>
          <p class="setgoods">小烦恼没什呢大不了</p>
          <p class="setgoods">小烦恼没什呢大不了</p>
          <p class="setgoods">小烦恼没什呢大不了</p>
          <p class="setgoods">小烦恼没什呢大不了</p>
          <p class="setgoods">小烦恼没什呢大不了</p>
          <p class="setgoods">小烦恼没什呢大不了</p>
          <p class="setgoods">小烦恼没什呢大不了</p>
          <p class="setgoods">小烦恼没什呢大不了</p>
          <p class="setgoods">小烦恼没什呢大不了</p>
          <p class="setgoods">小烦恼没什呢大不了</p>
          <p class="setgoods">小烦恼没什呢大不了</p>
          <p class="setgoods">小烦恼没什呢大不了</p>
          <p class="setgoods">小烦恼没什呢大不了</p>
          <p class="setgoods">小烦恼没什呢大不了</p>
          <p class="setgoods">小烦恼没什呢大不了</p>
          <p class="setgoods">小烦恼没什呢大不了</p>
          <p class="setgoods">小烦恼没什呢大不了</p>
          <p class="setgoods">小烦恼没什呢大不了</p>
          <p class="setgoods">小烦恼没什呢大不了</p>
        </div> -->
        <van-share-sheet v-model="showShare" title="立即分享给好友" :options="options"/>
      </section>
    </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Icon, Empty, Swipe, SwipeItem, Image as VanImage, ImagePreview, GoodsAction, GoodsActionIcon, GoodsActionButton, ShareSheet, Toast } from 'vant'
import { getProDetailData, addCart } from '@/api'
import { mapActions, mapGetters, mapState } from 'vuex'

Vue.use(NavBar)
Vue.use(Icon)
Vue.use(Empty)
Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(VanImage)
Vue.use(ImagePreview)
Vue.use(GoodsAction)
Vue.use(GoodsActionButton)
Vue.use(GoodsActionIcon)
Vue.use(ShareSheet)

export default {
  data () {
    return {
      proObj: {},
      flag: true,
      detailBannerList: [
        '//img.alicdn.com/imgextra/i1/2207959261164/O1CN010wW56C1KT9cpBcelD_!!2207959261164.jpg_760x760Q50s50.jpg_.webp',
        '//img.alicdn.com/imgextra/i2/2207959261164/O1CN01FGz2sm1KT9cpc4tER_!!2207959261164.jpg_760x760Q50s50.jpg_.webp',
        '//img.alicdn.com/imgextra/i2/2207959261164/O1CN01Rr65f71KT9cgsonnR_!!2207959261164.jpg_760x760Q50s50.jpg_.webp'
      ],
      current: 0,
      showShare: false,
      navFlag: true,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' }
      ]
    }
  },
  computed: {
    ...mapGetters({ totalNum: 'totalNum' }),
    ...mapState({ loginState: ({ user: { loginState } }) => loginState })
  },
  methods: {
    ...mapActions({
      getCartData: 'cart/getCartData'
    }),
    chat () {
      window._MEIQIA('showPanel')
      window._MEIQIA('metadata', {
        name: '智子', // 美洽默认字段
        tel: '17855370874',
        address: '半人马座阿尔法星', // 美洽默认字段
        aaa: 'bla bla bla', // 自定义字段
        xyz: 'lalala' // 自定义字段
      })
      window._MEIQIA('product', {
        picUrl: 'https://xxx/xxx.jpg',
        title: '美洽 - 客服系统',
        description: '支持PC端/移动端/微信/APP/微博...等全渠道对话接入，稳定快速，无需下载部署，注册即用',
        productUrl: 'https://xxx/xxx.html',
        salesCount: 111,
        success: data => {
          console.log(data, 'data')
        },
        error: error => {
          console.log(error, 'error')
        }
      })
    },
    addCart () {
      if (!this.loginState) {
        this.$router.push('/login')
        return
      }
      addCart({
        userid: localStorage.getItem('userid'),
        proid: this.proObj.proid,
        num: 1
      }).then(res => {
        if (res.data.code === '200') {
          Toast('加入购物车成功')
          this.getCartData(localStorage.getItem('userid'))
        }
      })
    },
    scrollFn () {
      console.log(111)
      if (this.$refs.content.scrollTop > 50) {
        this.navFlag = false
      } else {
        this.navFlag = true
      }
    },
    onchange (index) {
      this.current = index
    },
    previewImg () {
      ImagePreview({
        images: this.detailBannerList, // 预览图片的数组
        startPosition: this.current,
        onClose () {

        }
      })
    }
  },
  mounted () {
    window._MEIQIA('withoutBtn')
    window._MEIQIA('init')
    this.getCartData(localStorage.getItem('userid'))
    this.$refs.content.addEventListener('scroll', this.scrollFn)
    // console.log(this.$route.params.proid)
    const { params: { proid } } = this.$route // 多重结构赋值
    getProDetailData({
      proid
    }).then(res => {
      if (res.data.code === '1001') {
        this.flag = true
      } else {
        this.flag = false
        this.proObj = res.data.data
        // 组合详情的轮播图，数组前添加
        this.detailBannerList.unshift(this.proObj.proimg)
      }
    })
  }
}
</script>
<style lang="scss" scoped>
header {
  .van-nav-bar {
    width: 100%;
    span {
      margin: 16px;
    }
  }
}
.content {
  .van-image {
    width: 3.75rem;
    height: 3.75rem;
  }
  .detail-swipe {
    height: 3.75rem;
  }
  .custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
  }
  .proinfo {
    margin-top: 8px;
    font-size: 14px;
    padding: 0 10px;
    font-weight: 700;
    span {
      display: inline-block;
      font-size: 20px;
      color: red;
    }
    .iconfont {
      font-size: 14px;
      color: #333;
      float: right;
    }
  }
}
</style>
